<template>
  <div style="margin: 20px">
    <div class="mt-5" style="text-align: center" v-if="authUser">
      请先添加加油员（油站用户），之后再来此配置油枪~
    </div>
    <div v-else>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
        class="globalSerchFormStyle"
      >
        <el-row>
          <el-col :span="6" v-if="$store.state.user.userLevel === '1'">
            <el-form-item label="油站名称" prop="stationId" size="small">
              <el-select
                style="width: 190px"
                v-model="queryParams.stationId"
                :clearable="true"
                filterable
                placeholder="请选择油站名称"
              >
                <el-option
                  v-for="item in stationList"
                  :key="item.stationId"
                  :label="item.stationName"
                  :value="item.stationId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="员工姓名" prop="nickName" size="small">
              <el-input
                v-model="queryParams.nickName"
                placeholder="请输入员工姓名"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="员工账号" prop="userName" size="small">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入员工账号"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号" prop="phonenumber" size="small">
              <el-input
                v-model="queryParams.phonenumber"
                placeholder="请输入手机号"
                style="width: 190px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="global_el_rowStyle" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            size="mini"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="resetQuery"
            size="mini"
            plain
            >重置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="el-icon-plus" size="mini" @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="selectionList.length < 1"
            @click="handleDeleteAll"
            >删除</el-button
          >
        </el-col>
      </el-row>
      <div style="margin-bottom: 8px"></div>
      <el-table
        :data="personnelList"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="加油站名称" align="left" prop="stationName" />
        <el-table-column label="加油员姓名" align="left" prop="nickName" />
        <el-table-column label="加油员账号" align="left" prop="userName" />
        <el-table-column label="加油员手机号" align="left" prop="phonenumber" />
        <el-table-column
          label="负责枪号"
          align="left"
          prop="gun"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="300"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-download"
              @click="exportQr(scope.row)"
              >生成员工码</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="gotoFunctionConfig(scope.row)"
              >功能配置
            </el-button>

            <!--
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-download"
            v-if="personnelList.length == 1"
            @click="exportQr(scope.row)"
            >导出油站码</el-button
          >
          -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="fr"
        style="margin-top: 8px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加或修改油站加油员信息对话框 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="加油员姓名" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入加油员姓名" />
        </el-form-item>


        <el-form-item label="负责枪号" prop="gunList">
          <template v-if="!currentGunList || currentGunList.length === 0">
            {{ gunTip }}
          </template>
          <template v-else>
            <el-checkbox-group v-model="form.gunList">
              <el-checkbox v-for="item in currentGunList" :key="item" :label="item" :value="item">
                {{ item + "号枪" }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
        <hr>

        <el-form-item label="推送id" prop="pushOpenid">
          <el-input v-model="form.pushOpenid" placeholder="请输入推送id" />
        </el-form-item>
        <el-form-item label="接收微信通知" prop="empPushFlag">
          <el-select v-model="form.empPushFlag" placeholder="请选择开关" clearable size="small">
            <el-option label="关闭" value="0"></el-option>
            <el-option label="开启" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="空订单选项" prop="nullSendFlag">
          <el-select v-model="form.nullSendFlag" placeholder="请选择开关" clearable size="small">
            <el-option label="不发送" value="0"></el-option>
            <el-option label="发送" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推送的加油员" prop="idList">

          <template v-if="selectPersonnelList.length === 0">
            {{ '木有拉取到员工，请先配置员工' }}
          </template>
          <template v-else>
            <el-checkbox-group v-model="form.idList">
              <el-checkbox v-for="item in selectPersonnelList" :key="item.userId" :label="'' + item.userId">
                {{ item.nickName + '-' + item.userName }}
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="personnelList.length == 0
        ? '添加加油员须知'
        : personnelList.length == 1
          ? '添加加油员确认'
          : '删除加油员确认'
      " :visible.sync="confirmDialog" width="500px" append-to-body>
      <div class="m-2 mt-0" v-if="personnelList.length == 0">
        <div style="text-align: center">关于加油员</div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-3">
          1、请至少添加一名加油员，否则小程序无法进行支付。
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
          2、当您只添加 【<b>一名加油员</b>】
          ：小程序采取开放模式（即用户<b>可以不通过扫员工码进入</b>），小程序会拉取该加油员所管理的油枪，用户产生的订单全部算在该加油员的名下。
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2 mb-3">
          3、当您添加了 【<b>多名加油员</b>】
          ：小程序采取限制模式（即<b>只能够通过扫员工码进入</b>），小程序会拉取对应员工码下的加油员所管理的油枪，用户扫员工码产生的订单算在对应加油员的名下。
        </div>
      </div>
      <div class="m-2" v-else-if="personnelList.length == 1">
        <div>你当前只有一名加油员，所有的订单都会计入该加油员名下。</div>
        <div class="mt-2">
          您正在添加第二名加油员，操作成功之后，<b>系统将发生以下变化：</b>
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-4">
          1、小程序端会限制用户进入的方式，用户只能通过<b>扫描加油员的员工码</b>来进入小程序进行支付。其他方式进入小程序，会强制调用相机启动扫一扫功能。
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
          2、用户扫描员工码产生的订单，会自动计入到员工码对应的加油员身上。
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
          3、如果您启用了标签，可能需要导出多个<b>加油员标签码</b>~
          当然，不想使用太多标签码，也可以组合搭配使用，详情可以到标签模块了解~
        </div>
        <div class="mt-4 text-secondary">
          如果您对上述内容有清晰的了解，继续想添加加油员，请点击确认按钮。
        </div>

        <div class="mt-2 text-secondary">
          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
        </div>
      </div>
      <div class="m-2" v-else-if="personnelList.length == 2">
        <div>您目前有两名加油员，订单会根据员工码计入加油员名下。</div>
        <div>
          您正在删除一名加油员，操作成功之后，<b>系统将发生以下变化：</b>
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-4">
          1、小程序端会开放用户进入的方式，用户可以通过多种方式进入小程序进行支付。
        </div>
        <div style="color: red; font-size: 12px; text-indent: 2em" class="mt-2">
          2、用户支付产生的所有订单，会自动计入到仅剩下的加油员的名下。
        </div>
        <div class="mt-4 text-secondary">
          如果您对上述内容有清晰的了解，继续想删除加油员，请点击删除按钮。
        </div>

        <div class="mt-2 text-secondary">
          如果您对上面的内容不够了解，请联系运营人员来辅助设置。
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button :type="personnelList.length == 0 || personnelList.length == 1
            ? 'primary'
            : 'danger'
          " @click="confirmSubmit">{{
    personnelList.length == 0
    ? "我知道了~"
    : personnelList.length == 1
      ? "我已经了解，继续添加加油员"
      : "我已经了解，确认删除该加油员"
  }}</el-button>
        <el-button @click="confirmCancel">取 消</el-button>
      </div>
    </el-dialog> -->

    <el-dialog
      :visible.sync="exportQrDialog"
      width="600px"
      append-to-body
      title="员工码"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="公众号" name="gzh">
          <div style="text-align: center">
            <gzhQr
              :text="qrStr"
              :activeKey="activeName"
              @downloadImg="downloadImg"
              :nickName="currentExport.nickName"
              name="员工码"
            >
            </gzhQr>
            <div>{{ "员工姓名：" }}{{ currentExport.nickName }}</div>
            <div
              class="mx-auto d-flex"
              style="width: 500px; justify-content: center; align-items: center"
            >
              <span>负责枪号：</span>
              <div
                class="d-inline-flex"
                style="
                  max-width: 350px;
                  flex-wrap: wrap;
                  justify-content: space-between;
                "
              >
                <span
                  v-for="ele in currentExport.gunList"
                  :key="ele"
                  style="width: 85px"
                >
                  {{ ele + "号枪" }}
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="小程序" name="xcx" v-if="isHaveXcx">
          <div style="text-align: center">
            <xcxQr
              :text="xcxStr"
              :activeKey="activeName"
              @downloadImg="downloadImg"
              :nickName="currentExport.nickName"
              name="员工码"
            >
            </xcxQr>
          </div>
        </el-tab-pane>
        <el-tab-pane label="闪付" name="gzhSF">
          <div style="text-align: center">
            <gzhSFQr
              :text="gzhSfStr"
              :activeKey="activeName"
              @downloadImg="downloadImg"
              :nickName="currentExport.nickName"
              name="闪付码"
            >
            </gzhSFQr>
            <div>{{ "员工姓名：" }}{{ currentExport.nickName }}</div>
            <div
              class="mx-auto d-flex"
              style="width: 500px; justify-content: center; align-items: center"
            >
              <span>负责枪号：</span>
              <div
                class="d-inline-flex"
                style="
                  max-width: 350px;
                  flex-wrap: wrap;
                  justify-content: space-between;
                "
              >
                <span
                  v-for="ele in currentExport.gunList"
                  :key="ele"
                  style="width: 85px"
                >
                  {{ ele + "号枪" }}
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="充值" name="cz">
          <div style="text-align: center">
            <cz-qr
              :text="czStr"
              :activeKey="activeName"
              @downloadImg="downloadImg"
              :nickName="currentExport.stationName"
              name="充值码"
            >
            </cz-qr>
            <div>{{ "员工姓名：" }}{{ currentExport.nickName }}</div>
            <div
              class="mx-auto d-flex"
              style="width: 500px; justify-content: center; align-items: center"
            >
              <span>负责枪号：</span>
              <div
                class="d-inline-flex"
                style="
                  max-width: 350px;
                  flex-wrap: wrap;
                  justify-content: space-between;
                "
              >
                <span
                  v-for="ele in currentExport.gunList"
                  :key="ele"
                  style="width: 85px"
                >
                  {{ ele + "号枪" }}
                </span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="推荐码" name="tj">
          <p style="text-align: center">点击图片进行下载</p>
          <div id="tj_qr" style="text-align: center;margin-bottom:0px;" @click="downloadQRCode">
            <p>{{stationName}}</p>
            <!-- <p class="qr_tj"><img class="qrImg" :src="tjStr" alt=""></p> -->
            <p class="qr_tj"><canvas id="qrCanvas"/></p>
            <div class="staff_name">推荐码</div>
            <div>{{ "员工姓名：" }}{{ currentExport.nickName }}</div>
            <div class="mx-auto d-flex" style="width: 500px; justify-content: center; align-items: center">
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <employeeForm ref="employee" :parm="params" @success-data="getData" />

    <!-- 功能配置 -->
    <StationFunctionalConfig
      :functionConfigDialog.sync="functionConfigDialog"
      :currentRowdata="currentRowdata"
    ></StationFunctionalConfig>
  </div>
</template>

<script>
import {
  listPersonnel,
  delPersonnel,
  addPersonnel,
  updatePersonnel,
  exportPersonnel,
  getAllGunByStationId,
  getStaffQuery,
  staffDeleteAll,
  staffGetById,
  selectEnterpriseAppid,
  getEmployeeQrApi,
} from "@/api/station/personnel";
import { enterpriseList } from "@/api/station/order";
import { listEnterpriseStation } from "@/api/dept";
import { stationinfo, listGun } from "@/api/station/gun";
import { getDept } from "@/api/system/dept";
import Base64 from "@/utils/base64";
import gzhQr from "@/components/QrCode";
import xcxQr from "@/components/QrCode/xcx-qr.vue";
import gzhSFQr from "@/components/QrCode/gzhSF.vue";
import czQr from "@/components/QrCode/czQr.vue";
import settings from "@/settings";
import employeeForm from "./Station_Employee.form.vue";
import StationFunctionalConfig from "./Station_functional_config.vue";
import QRCode from 'qrcode'
import html2canvas from 'html2canvas';
export default {
  name: "Station_Employee",
  data() {
    return {
      // 总条数
      total: 0,
      // 油站加油员信息表格数据
      personnelList: [],
      selectPersonnelList: [],
      allGunList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {},
      query: {
        deptId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        personnelName: [
          { required: true, message: "请输入加油员姓名", trigger: "blur" },
        ],
        checkedGunList: [
          { required: true, message: "请选择油枪", trigger: "change" },
        ],
        personnelPhone: [
          { required: true, message: "请输入加油员手机号", trigger: "blur" },
        ],
      },
      confirmDialog: false,
      deletePersonnelId: undefined,
      exportQrDialog: false,
      qrStr: "",
      gzhSfStr: "",
      xcxStr: "",
      czStr: "",
      tjStr:"",
      currentExport: {},
      currentGunList: [],
      gunTip: "加载中...",
      stationList: [],
      enterpriseList: [],
      loading: false,
      pageNum: 1,
      pageSize: 10,
      selectionList: [],
      params: {},
      activeName: "gzh",
      isHaveXcx: false,
      functionConfigDialog: false, // 功能配置弹框
      currentRowdata: {}, // 当前行数据
      userId:null,//员工id
      stationName:'',//油站名
    };
  },
  components: {
    gzhQr,
    gzhSFQr,
    xcxQr,
    employeeForm,
    czQr,
    StationFunctionalConfig,
  },
  mounted() {
    // 如果当前是油企账号，则获取该企业下的油站
    if (this.$store.state.user.userLevel === "1") {
      this.getStationList(this.presentEnterprise.enterpriseId);
      this.getData();
    } else if (this.$store.state.user.userLevel === "2") {
      this.queryParams.stationId = this.$store.state.user.stationId;
      this.getData();
    }
  },
  methods: {
    getData() {
      if (this.loading) return;
      this.loading = true;
      let queryData = this.getQueryData(this.queryParams);
      queryData = Object.assign(
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          enterpriseId: this.presentEnterprise.enterpriseId,
        },
        queryData
      );
      getStaffQuery(queryData).then((res) => {
        if (res && res.code === 200) {
          this.personnelList = res.rows;
          this.total = res.total;
        } else {
          this.personnelList = [];
          this.total = 0;
        }
      });
      this.loading = false;
    },
    handleQuery() {
      this.getData();
    },
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.getData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getData();
    },
    handleSelectionChange(selection) {
      this.selectionList = selection;
    },
    // 删除
    handleDeleteAll() {
      if (this.selectionList.length === 0) {
        return this.$message.warning("请选勾选需要删除的员工！！！");
      }
      this.$confirm(`确认删除勾选的员工吗？`).then(() => {
        let userIds = this.selectionList.map((item) => item.userId);
        staffDeleteAll({ ids: userIds }).then((res) => {
          if (res && res.code === 200) {
            this.$message.success(res.msg);
            this.selectionList = [];
            this.getData();
          } else {
            this.$message.error(res.msg);
          }
        });
      });
    },
    getQueryData(data) {
      let queryData = data;
      Object.keys(queryData).forEach((key) => {
        if (queryData[key] === "" || queryData[key] === undefined) {
          queryData[key] = null;
        }
      });
      return queryData;
    },
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationList = res || [];
      });
    },
    downloadImg() {
      this.msgSuccess("导出成功~");
    },
    getAllGunByStationId(stationId, gunList) {
      this.gunTip = "加载中...";
      this.currentGunList = [];
      getAllGunByStationId(stationId).then((res) => {
        this.currentGunList = res.data;
        if (!this.currentGunList || this.currentGunList.length == 0) {
          this.gunTip = "请确保油站已经配置油枪";
          return;
        }
        this.currentGunList = [
          ...new Set(this.currentGunList.concat(gunList)),
        ].sort((e, q) => {
          return e - q;
        });
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.params = {
        drawerType: "new",
        drawerShow: true,
        editData: {
          gunList: [],
          stationId:
            this.$store.state.user.userLevel === "2"
              ? this.$store.state.user.stationId
              : "",
          nickName: "",
          userName: "",
          phonenumber: "",
          password: "123456",
        },
        stationList: this.stationList,
      };
      this.$nextTick(() => {
        this.$refs.employee.clearForm();
        this.$refs.employee.currentGunList = [];
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      staffGetById({ id: row.userId }).then((res) => {
        this.params = {
          drawerType: "edit",
          drawerShow: true,
          // editData: {
          //   stationId: res.data.stationId,
          //   gunList: res.data.gunList,
          //   nickName: res.data.nickName,
          //   userName: res.data.userName,
          //   phonenumber: res.data.phonenumber,
          //   password: res.data.password,
          //   userId: res.data.userId,
          // },
          editData: res.data,
          stationList: this.stationList,
        };
        this.$nextTick(() => {
          this.$refs.employee.clearForm();
          this.$refs.employee.getStaffQueryGunList(row.stationId);
        });
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有油站加油员信息数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportPersonnel(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    // getParameterByName(url, name) {
    //     name = name.replace(/[\[\]]/g, "\\$&");
    //     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
    //         results = regex.exec(url);
    //     if (!results) return null;
    //     if (!results[2]) return '';
    //     return decodeURIComponent(results[2].replace(/\+/g, " "));
    // },
    // 生成员工码
    exportQr(row) {
      selectEnterpriseAppid({ enterpriseId: row.enterpriseId }).then((res) => {
        this.isHaveXcx = res.data;
      });
      let url = window.location.origin;
      console.log("员工域名：", url);
      let baseURL = "";
      switch (url) {
        case "https://yftx.xailife.com":
          baseURL = settings.baseURL;
          break;
        case "https://yftx-test.xailife.com":
          baseURL = settings.baseTestURL;
          break;
        case "https://yftx-test.xailife.com":
          baseURL = settings.baseDevURL;
          break;
        case "https://zh-admin.91cheyibao.com":
          baseURL = settings.baseCheyibaoURL;
          break;
        default:
          baseURL = settings.baseDevURL;
          break;
      }
      this.userId=row.userId
      this.stationName=row.stationName
      // 公众号
      this.currentExport = JSON.parse(JSON.stringify(row));
      const base = new Base64();
      const encodeStr = "e" + row.userId + "/";
      const encodedStr = base.encode(encodeStr);
      const trimEqualStr = encodedStr.replace(/={1,}$/g, "");
      // let baseUrl = this.presentEnterprise.isPlatformFlag == "1" ? "https://jump.huijy.net/" : "https://skip.huijy.net/"
      // this.qrStr = baseUrl + row.stationId + "/" + trimEqualStr;
      this.qrStr = `${baseURL}/${row.enterpriseId}/fuel/remit/?stationId=${row.stationId}&stationName=${row.stationName}&userId=${row.userId}&utmSource=1`;
      this.gzhSfStr = `${baseURL}/${row.enterpriseId}/fuel/remitSF/?stationId=${row.stationId}&stationName=${row.stationName}&userId=${row.userId}&utmSource=1`;
      console.log("传统码：", this.qrStr);
      console.log("闪付码：", this.gzhSfStr);
      // 小程序
      this.xcxStr = `${baseURL}?enterpriseId=${row.enterpriseId}&stationId=${row.stationId}`;
      console.log("小程序码：", this.xcxStr);
      // 充值码
      this.czStr = `${baseURL}/charge/?enterpriseId=${row.enterpriseId}&operator=${row.userId}`;
      console.log("充值码", this.czStr);
      this.exportQrDialog = true;
    },
    async handleClick(tab) {
    if (tab.name == 'tj') { 
    // 等待获取二维码数据
    const res = await getEmployeeQrApi({userId: this.userId});
    if (res && res.code === 200) {
        //this.tjStr = res.data.qrCodeUrl;
        this.tjStr=res.data.url
        // 等待生成二维码
         await new Promise((resolve, reject) => {
             QRCode.toCanvas(document.getElementById('qrCanvas'), this.tjStr, { width: 400,  }, (error) => {
               if (error) {
                   reject(error);
               } else {
                   resolve();
               }
             });
         });
    } else {
        // 获取二维码数据失败
        this.$message.error(res && res.msg);
    }
}

    },
    downloadQRCode() {
      // const qrContainer = document.getElementById('tj_qr');
      //   // 使用 HTML2Canvas 将指定区域转换为 Canvas
      //   html2canvas(qrContainer).then(canvas => {
      //   // 将 Canvas 转换为图片 URL
      //   const imgUrl = canvas.toDataURL('image/png');
        
      //   // 创建一个链接元素，用于下载图片
      //   const a = document.createElement('a');
      //   a.href = imgUrl;
      //   a.download = '推荐码.png';
        
      //   // 模拟点击链接进行下载
      //   document.body.appendChild(a);
      //   a.click();
      //   document.body.removeChild(a);
      //   });
      const qrContainer = document.getElementById('tj_qr');

    // 使用 HTML2Canvas 将指定区域转换为 Canvas
      html2canvas(qrContainer, { scale: 2 }).then(canvas => { // 可以添加额外的选项，比如 scale 来提高分辨率
        // 创建一个链接元素，用于下载图片
        const a = document.createElement('a');
        
        // 将 Canvas 转换为图片 URL
        const imgUrl = canvas.toDataURL('image/png');
        
        // 设置链接的下载属性为图片文件名，并指定图片的 URL
        a.href = imgUrl;
        a.download = '推荐码.png';

        // 模拟点击链接进行下载
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    // 功能配置
     gotoFunctionConfig(row) {
      this.currentRowdata = row;
      this.functionConfigDialog = true;
    },
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
#tj_qr{ 
  p:first-child{ 
    font-size: 40px;
    font-weight: bold;
  }
  .qr_tj{ 
    border-radius: 12.5px;
    #qrCanvas{ 
      background-color: #21a307;
      padding:35px;
    }
    .qrImg{ 
      background-color: #21a307;
      padding:35px;
    }
  }
  .staff_name{ 
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
  }
  
}
::v-deep .el-dialog {
  margin-bottom: 50px;
}
</style>
